<template>
  <div class="">
    <div class="info">
        <div class="info-left">
          <div class="left-top">
            <div class="top-title">
              <p class="grade">清柠等级</p>
              <img class="grade-icon" src="@/assets/mime/grade.png"/>
                <!-- 下拉菜单 -->
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <i class="el-icon-more"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" class="menu">
                    <el-dropdown-item command="a" @click.native="deleteDoc">删除</el-dropdown-item>
                    <el-dropdown-item command="b"  @click.native="editDoc">编辑</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="top-data">总积分 463　等级 3</div>
          </div>
          <div class="left-bottom">
            <div class="bottom-title">
              <p class="column">个人专栏</p>
              <img class="column-icon" src="@/assets/mime/column.png"/>
                <!-- 下拉菜单 -->
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <i class="el-icon-more"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" class="menu">
                    <el-dropdown-item command="a" @click.native="deleteDoc">删除</el-dropdown-item>
                    <el-dropdown-item command="b"  @click.native="editDoc">编辑</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="bottom-data">生活　　　　　3篇</div>
          </div>
        </div>
        <div class="info-right">
          <div class="right-title">
              <p class="column">个人成就</p>
              <img class="column-icon" src="@/assets/mime/achieve.png"/>
                <!-- 下拉菜单 -->
                <el-dropdown>
                  <el-dropdown-menu>
                  <span class="el-dropdown-link">
                    <i class="el-icon-more"></i>
                  </span>
                </el-dropdown-menu>
                </el-dropdown>
          </div>
          <div class="right-info">
              <div class="likes">
                <div class="likes-back">
                  <img class="likes-icon" src="@/assets/mime/likes.png"/>
                </div>
                <div class="likes-info">
                    <p class="info-name">获赞数量</p>
                    <p class="info-number">654次</p>
                </div>
              </div>
              <div class="collect">
                <div class="collect-back">
                  <img class="collect-icon" src="@/assets/mime/collect.png"/>
                </div>
                <div class="collect-info">
                    <p class="info-name">收藏数量</p>
                    <p class="info-number">654次</p>
                </div>
              </div>
              <div class="recommend">
                <div class="recommend-back">
                  <img class="recommend-icon" src="@/assets/mime/recommend.png"/>
                </div>
                <div class="recommend-info">
                    <p class="info-name">获得推荐</p>
                    <p class="info-number">654次</p>
                </div>
              </div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'persondata',
  // 接收父组件传入的参数
  props: {},
  // 注册组件
  components: {},
  // 数据
  data () {
    return {}
  },
  // 属性值计算
  computed: {},
  // 数据侦听
  watch: {},
  // vue实例被创建时
  created () {},
  // vue实例被挂载至dom上时
  mounted () {},
  // 实例方法
  methods: {},
  // keep-alive之后页面会缓存，不会执行created(),和mounted(),但是会执行activated()
  activated () {},
  // 退出的生命周期钩子
  deactivated () {},
  // 销毁
  destroyed () {},
}
</script>
<style lang='less' scoped>
.info {
  width: 33vw;
  height: 35vh;
  .info-left{
    background: transparent;
    height: 33vh;
    width: 17vw;
    display: inline-block;
    position: relative;
    .left-top {
      display: inline-block;
      height: 12vh;
      width: 16vw;
      background: transparent;
      box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 25%);
      position: absolute;
      top: 3vh;
      border-radius: 10px;
      .top-title {
        display: inline-block;
        height: 4.2vh;
        display: flex;
        justify-content: baseline;
        align-items: center;
        padding-left: 1vw;
        font-size: 16px;
        font-weight: 500;
        color: rgba(13, 128, 120, 1);
        margin: 1vh 0;
        .grade-icon {
          margin-left: 0.5vw;
          height: 2.5vh;
          width: 1.5vw;
        }
        .el-dropdown {
          position: absolute;
          right: 0.5vw;
          top: 2vh;
          transform: rotate(90deg);
        }
      }
      .top-data {
        display: inline-block;
        height:3.5vh;
        width: 13vw;
        border: 1px solid;
        display: flex;
        justify-content: baseline;
        align-items: center;
        padding-left: 1vw;
        font-size: 14px;
        font-weight: 500;
        color: rgba(13, 128, 120, 1);
        margin: 0 0.9vw;
        border-radius: 5px;
        background: rgba(213, 237, 161, 1);
        border: 1px solid rgba(244, 250, 232, 1);   
      }
    }
    .left-bottom {
      display: inline-block;
      height: 12vh;
      width: 16vw;
      background: transparent;
      box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 25%);
      position: absolute;
      bottom: 2vh;
      border-radius: 10px;
      .bottom-title {
        display: inline-block;
        height: 4.2vh;
        display: flex;
        justify-content: baseline;
        align-items: center;
        padding-left: 1vw;
        font-size: 16px;
        font-weight: 500;
        color: rgba(13, 128, 120, 1);
        margin: 1vh 0;
        .column-icon {
          margin-left: 0.5vw;
          height: 2.5vh;
          width: 1.5vw;
        }
        .el-dropdown {
          position: absolute;
          right: 0.5vw;
          top: 2vh;
          transform: rotate(90deg);
        }
      }
      .bottom-data {
        display: inline-block;
        height: 3.5vh;
        width: 13vw;
        display: flex;
        justify-content: baseline;
        align-items: center;
        padding-left: 1vw;
        font-size: 14px;
        font-weight: 500;
        color: rgba(13, 128, 120, 1);
        margin: 0 0.9vw;
        border-radius: 5px;
        background: rgba(213, 237, 161, 1);
        border: 1px solid rgba(244, 250, 232, 1);   
      }
    }
  }
  .info-right{
    height: 33vh;
    width: 14vw;
    display: inline-block;
    position: relative;
    top: -28vh;
    border-radius: 10px;
    background: rgba(244, 250, 232, 1);
    box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.25);
    .right-title {
      height: 6vh;
      display: inline-block;
      display: flex;
      justify-content: baseline;
      align-items: center;
      padding-left: 1vw;
      font-size: 18px;
      font-weight: 500;
      color: rgba(13, 128, 120, 1);
      margin: 1vh 0;
      .column-icon {
          margin-left: 0.5vw;
          height: 3.2vh;
          width: 2vw;
      }
      .el-dropdown {
          position: absolute;
          right: 0.5vw;
          top: 2vh;
          transform: rotate(90deg);
      }
    }
    .right-info {
      position: absolute;
      top: 8vh;
      left: -11vw;
      height: 12vh;
      width: 32vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      .likes {
        height: 7.6vh;
        width: 12.6vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-left: 1vw;
        margin-top: 2vh;
          .likes-back {
            height: 5vh;
            width: 5vh;
            background: rgba(213, 237, 161, 1);
            border-radius: 5px;
            .likes-icon {
              height: 3.5vh;
              width: 3.5vh;
              margin: 0.7vh;
            }
          }
          .likes-info {
            display: flex;  
            flex-direction: column-reverse;
            float: left;
            .info-number {
              font-size: 16px;
              font-weight: 400;
              color: #00baad;
              margin: 0vh 0vw 3vh -3vw;
            }
            .info-name {
                font-size: 16px;
                font-weight: 400;
                color: rgba(111, 111, 111, 1);
                margin: -8vh 0vw 0vh -3vw;
            }
          }
      }
      .collect {
        height: 7.6vh;
        width: 12.6vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-left: 1vw;
        margin-top: 2vh;
          .collect-back {
            height: 5vh;
            width: 5vh;
            background: rgba(213, 237, 161, 1);
            border-radius: 5px;
            .collect-icon {
              height: 3.5vh;
              width: 3.5vh;
              margin: 0.6vh;
          }
          }
          .collect-info {
            display: flex;  
            flex-direction: column-reverse;
            float: left;
            .info-number {
              font-size: 16px;
              font-weight: 400;
              color: #00baad;
              margin: 0vh 0vw 3vh -3vw;
            }
            .info-name {
                font-size: 16px;
                font-weight: 400;
                color: rgba(111, 111, 111, 1);
                margin: -8vh 0vw 0vh -3vw;
            }
          }
      }
      .recommend {
        height: 7.6vh;
        width: 12.6vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-left: 1vw;
        margin-top: 2vh;
          .recommend-back {
            height: 5vh;
            width: 5vh;
            background: rgba(213, 237, 161, 1);
            border-radius: 5px;
            .recommend-icon {
              height: 3.7vh;
              width: 3.7vh;
              margin: 0.7vh;
          }
          }
          .recommend-info {
            display: flex;  
            flex-direction: column-reverse;
            float: left;
            .info-number {
              font-size: 16px;
              font-weight: 400;
              color: #00baad;
              margin: 0vh 0vw 3vh -3vw;
            }
            .info-name {
                font-size: 16px;
                font-weight: 400;
                color: rgba(111, 111, 111, 1);
                margin: -8vh 0vw 0vh -3vw;
            }
          }
      }
    }
  }
}
</style>